<template>
  <div style="background-color: #ffffff;">
    <!-- :before-change="beforeChange" -->
    <HeadNav :title="currentDate+'待入库'"></HeadNav>
    <!-- 周月年 -->
    <div
      class="content"
      :style="bottomHeight">
      <div class="recordList">
        <van-checkbox-group
          ref="checkboxGroup"
          v-model="checked"
          @change="onCheckboxChange">
          <div
            class="recordItem"
            v-for="(item, index) in recordList"
            :key="index"
            :id="item.id" >
            <div class="recordItem_top" >
              <van-checkbox
                checked-color="#047DCB"
                :label-disabled="false"
                :name="item.id"
                ref="checkboxes"
                shape="round"
                v-model="item.isChecked">
              </van-checkbox>
              <div class="recordItem_bg">
                <div class="recordItemL">
                  <div class="recordItemL-left"><img
                    :src="item.Icon"
                    alt=""></div>
                  <div class="recordItemL-right">
                    <div class="recordItemL-right-text">{{ item.name }}</div>
                    <div
                      class="recordItemL-right-text"
                      style="margin-top: 8px;">{{ item.date }}
                    </div>
                  </div>
                </div>
                <div class="recordItemR">
                  <div class="recordItemR-left">
                    <div class="recordItemR-left-num">共{{ item.allNum }}项产品</div>
                    <div
                      class="recordItemR-left-price"
                      style="margin-top: 8px;">合￥{{ item.allPrice
                      }}
                    </div>
                  </div>
                  <div class="recordItemR-right"><van-icon
                    name="arrow-down"
                    size="11"
                    @click="tocheckedDetail(item, index)" /></div>
                </div>
              </div>
            </div>

            <div
              class="details_box"
              v-if="current == index && show">
              <div
                class="goods-box"
                v-for="(ele, val) in item.goodsList"
                :key="val"
                :id="val">
                <div class="goods-title">{{ ele.title }}</div>
                <div class="goods-num">
                  <van-button
                    icon="minus"
                    type="info"
                    class="minus"
                    @click.stop="jian(val, ele.id, ele.selectNum)"></van-button>
                  <div
                    class="selectnum"
                    @click="showInputNum(ele, val)">{{ ele.selectNum }}</div>
                  <van-button
                    icon="plus"
                    type="primary"
                    class="plus"
                    @click.stop="add(val, ele.id)"></van-button>
                </div>
              </div>
              <div class="btnArea">
                <van-button
                  class="btnStockIn"
                  plain
                  type="primary">入库当前档口</van-button>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
      <div
        class="bottomArea "
        id="bottomArea"
        ref="bottomMenu">
        <van-checkbox
          checked-color="#047DCB"
          v-model="checkAll"
          :label-disabled="false"
          shape="round"
          @change="handleCheckAll" >
          全选
        </van-checkbox>
        <!-- <div class="btnArea"> -->
        <van-button
          type="primary"
          class="loginBtn">批量一键入库 </van-button>
        <!-- </div> -->
      </div>
    </div>
    <foot ref="footerMenu"></foot>
  </div>
</template>

<script>
/* eslint-disable */
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
export default {
    name: 'StockIn',
    components: {
        HeadNav,
        foot
    },
    computed: {
    },
    watch: {
        // active(newVal) {
        //     console.log('newVal', newVal)
        //     if (newVal === 0) {

        //     } else if (newVal === 0) {    

        //     } else {

        //     }
        // },
        // recordList: {
        //     handler(val) {
        //         console.log(val)
        //         var i = 0
        //         this.recordList.forEach(item => {
        //             if (item.isChecked === true) {
        //                 i++
        //             }
        //             if (i === this.recordList.length) {
        //                 this.checkAll = true
        //             } else {
        //                 this.checkAll = false
        //             }
        //         })
        //     },
        //     deep: true
        // },
        // 监听 checked 数组变化，更新全选状态
        checked: {
            handler(newChecked) {
                console.log(newChecked, 'newName')
                this.checkAll = newChecked.length === this.recordList.length
                this.selectedRowKeys = newChecked
                this.selectedRows = this.recordList.filter(item=>newChecked.includes(item.id))
            },
            deep:true
        },
        selectedRowKeys: {
            handler(val) {
                console.log(val, 'selectedRowKeys')
            }
        },
        selectedRows: {
            handler(val) {
                console.log(val, 'selectedRows')
            }
        }
    },
    data() {
        return {
            active: 1,
            tabList: [
                {
                    typeId: 0,
                    typeName: '周'
                },
                {
                    typeId: 1,
                    typeName: '月'
                },
                {
                    typeId: 2,
                    typeName: '年'
                }
            ],
            checkAll: false, // 标记是否全选
            checked: [], // 全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            recordList: [
                {
                    id: 1,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name: '运中食堂第一档口',
                    date: '2024.01.26(周日)',
                    allNum: '5',
                    allPrice: '260.00',
                    goodsList: [

                        {
                            id: '101',
                            title: '新东大鸡排  (件/20公斤)',
                            price: '170.00',
                            selectNum: 0,
                        },
                        {
                            id: '101',
                            title: '鱼丸\虾丸（件/10公斤）',
                            price: '115.00',
                            selectNum: 0,
                        },
                        {
                            id: '101',
                            title: '牛肉（斤）',
                            price: '45',
                            selectNum: 0,
                        },
                        {
                            id: '101',
                            title: '烤肠（件/12公斤）',
                            price: '156.00',
                            selectNum: 0,
                        },
                        {
                            id: '101',
                            title: '大鸡排（10袋）',
                            price: '165.00',
                            selectNum: 0,
                        }
                    ],
                },
                {
                    id: 2,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name: '运中食堂第一档口',
                    date: '2024.01.25(周六)',
                    allNum: '5',
                    allPrice: '795.00'
                },
                {
                    id: 3,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name: '运中食堂第一档口',
                    date: '2024.01.26(周五)',
                    allNum: '5',
                    allPrice: '795.00'
                },
                {
                    id: 4,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name: '运中食堂第一档口',
                    date: '2024.01.26(周四)',
                    allNum: '5',
                    allPrice: '795.00'
                },
            ],
            show: true,
            current: -1,
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            bottomHeight: '',
            nowDate:new Date().getTime(),
            currentDate:''
        }
    },
    mounted() {
        this.recordList.forEach(ele => {
            this.$set(ele, 'isChecked', true)
        });
        console.log(this.recordList, 'ppp')

        const menuHeight = this.$refs.bottomMenu.offsetHeight;
        console.log('底部菜单栏高度：', menuHeight);
        // const footerMenu=this.$refs.footerMenu.footerMenu
        // console.log('底部菜单栏高度111aaa：', footerMenu);
        this.bottomHeight = `padding-bottom: ${Number(menuHeight) + 45}px;`
        console.log(this.bottomHeight, 'bottomHeight')
        const timestamp = new Date().getTime();
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        this.currentDate = `${year}-${month}-${day}`;
        console.log(this.currentDate,'this.currentDate');

    },

    created() {

    },
    methods: {

        toCheck() { },
        // 申报明细
        tocheckedDetail(item, val) {
            this.current = val
            this.show = !this.show
        },
        handleCheckAll(checkedAll){
            console.log(checkedAll,'sss')
            if(checkedAll){
                this.$refs.checkboxGroup.toggleAll(true);
            }else{
                // this.$refs.checkboxGroup.toggleAll(false);
            }
            // this.recordList.forEach(item => {
            //     item.isChecked = checkedAll;
            // });
            // this.checked = checkedAll? this.recordList.map(item => item.id) : [];
            // this.checkAll = checkedAll;
        },
        onCheckboxChange(newChecked){
            console.log(newChecked,'已选项')
            this.checked = newChecked;
            this.checkAll = newChecked.length === this.recordList.length;
            // 确保在全选状态下取消某一项时，其他项状态不变
            if (!this.checkAll && newChecked.length === this.recordList.length - 1) {
                this.recordList.forEach(item => {
                    if (!newChecked.includes(item.id)) {
                        item.isChecked = false;
                    }
                });
            }
        },

        // toggle(index , id) {
        //     const val = this.checked.indexOf(id);
        //     if(val ===-1){
        //         this.$refs.checkboxes[index].toggle(true);
        //     }else{
        //         this.$refs.checkboxes[index].toggle();
        //     }
        // },
    },
    beforeDestroy() {
        console.log('index')
        window.removeEventListener('scroll', this.onLoad, true)
    }
}
</script>

<style lang="less" scoped>
span,
p {
    padding: 0;
    margin: 0;
}

.content {
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
    height: 100%;
}

.recordList {
    background: #f9f9f9;
    padding-bottom: 5px;
    margin-top: 60px;
    border-top: 2px solid #f9f9f9;
}

.recordItem {
    background-color: #ffffff;
    padding-bottom: 5px;
    margin-bottom: 5px;
    // display: flex;

    .recordItem_top {
        display: flex;
        align-items: center;
        width: calc(100% - 48px);
        justify-content: space-between;
        padding-left: 24px;
        padding-right: 24px;
    }

    .recordItem_bg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 24px;
        padding-bottom: 24px;
        width: 100%;
    }

    .recordItemL {
        display: flex;
        align-items: center;
    }

    .recordItemL-left {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        img {
            width: 22px;
            height: 22px;
        }

    }

    .recordItemL-right {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 12px;

        .recordItemL-right-text {
            font-size: 14px;
            color: #000000;
            text-align: left;
        }
    }

    .recordItemR {
        display: flex;
        align-items: center;

        .recordItemR-left {
            .recordItemR-left-num {
                color: #666666;
                font-size: 14px;
            }

            .recordItemR-left-price {
                color: #000000;
                font-size: 14px;
            }
        }


        .recordItemR-right {
            margin-left: 12px;
        }
    }
}

.recordItem:last-child {
    margin-bottom: 0px;
}

.goods-box {
    background-color: #ffffff;
    padding: 12px 48px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f9f9f9;
    justify-content: space-between;

    .goods-title {
        font-size: 12px;
        line-height: 12px;
        text-align: left;
        color: #000000;
    }

    .goods-num {
        display: flex;
        align-items: center;

        .selectnum {
            font-size: 12px;
            text-align: center;
            color: #000000;
            margin: 0px 3px;
        }
    }

    .plus {
        width: 15px;
        height: 15px;
        background: #047DCB;
        border: none;
    }

    .minus {
        width: 15px;
        height: 15px;
        border: 1px solid #047DCB;
    }

    /deep/.van-button--normal {
        color: #ffffff !important;
        padding: 5px;
    }
}

.btnArea {
    padding: 24px;
    text-align: center;
}

/*清浮动*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}



/deep/.van-tabs__wrap {
    touch-action: manipulation;
    border-top: none;
}

/deep/.van-tab {
    border-top: none;
    border-bottom: 1px solid rgba(245, 244, 249, 1);
}

.bottomArea {
    display: flex;
    align-items: center;
    padding: 24px;
    position: fixed;
    bottom: 50px;
    width: calc(100% - 48px);
    background-color: #ffffff;
}

.btnStockIn {
    border: 1px solid #047DCB;
    border-radius: 40px;
    color: #047DCB;
    width: 100%;
    height: 45px;
}

.btnArea {
    //margin: 0px 24px;
}

// 去逛逛
.loginBtn {
    width: 100%;
    height: 45px;
    border: none;
    background: #047DCB;
    border-radius: 45px;
    margin-left: 30px;
}

.tips {
    margin-top: 25px;
    font-size: 14px;
    text-align: right;
    color: #000000;
    line-height: 14px;
}

/deep/ .van-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    width: 48px;
}

/deep/.van-checkbox__label {
    font-size: 12px;
    color: #010101;
}
</style>